<template>
	<transition name="fade">
		<section class="code-used-modal" v-show="visible">
			<div class="code-used-cont">
				<p class="title bottom-border" style="margin-bottom: 0;">
					合计付款：<span>¥{{price}}</span>
					<i class="iconfont" @click="toggleCodeModal">&#xe8b0;</i>
				</p>

				<div class="type-list" @click="switchType('balance')" v-if="!moneyNotEnough" v-show="balance"> 
					<img :src="require('assets/image/pay_account.png')">
					<div>账户余额<span class="main-color">￥{{money}}</span></div> 
					<i class="iconfont checked" v-if="type == 'balance'">&#xe631;</i>
					<i class="iconfont" v-else>&#xe8a3;</i>
				</div>

				<div class="type-list" v-else v-show="balance"> 
					<img :src="require('assets/image/pay_account_disable.png')">
					<div class="grey">
						账户余额￥{{money}}
						<router-link class="main-color" to="/recharge">余额不足</router-link>
					</div>  
				</div>

				<div class="type-list" @click="switchType('wx')">
					<img :src="require('assets/image/pay_wechat.png')"> 
					<div>微信支付</div> 
					<i class="iconfont checked" v-if="type == 'wx'">&#xe631;</i>
					<i class="iconfont" v-else>&#xe8a3;</i>
				</div>
 
				<div class="x-btn-wrap" style="position: absolute; bottom: 0;">
					<button class="x-btn" @click="confirmPay">确认付款</button>
				</div>
			</div>
		</section>
	</transition>
</template>

<script type="text/javascript">
	import { axiosPost } from 'src/config';

	export default {
		props: {
			price: {
				type: [String, Number],
				default: '0.00'
			},

			visible: {
				type: Boolean,
				default: false,
			},

			balance: {
				type: Boolean,
				default: true
			}
		},

		data() {
			return {
				type: '',  // balance => 余额， wx=> 微信支付
				money: '0.00'
			}
		},

		computed: {
			moneyNotEnough() {
				return +this.price > +this.money;
			}
		},

		created() { 
			axiosPost('/Weixin/Member/memberMoney', {}, json => {
				if (json.code == 1) {
					this.money = json.money;
					if (+this.price <= +this.money && this.balance) {
						this.type = 'balance';
					} else {
						this.type = 'wx';
					}
				}
			});
		},

		methods: {
			toggleCodeModal() {
				this.$emit('toggle-modal', false)
			},

			switchType(n) {
				this.type = n;
			},

			confirmPay() {
				if (!this.type) {
					this.$toast('请选择支付方式');
					return;
				}
				this.$emit('confirm-pay', this.type);
			}
		}
	}
</script>

 